<template>
  <div class="home-big">
    <div class="content-left">
      <div class="left-statistics">
        <ul class="tablist">
          <li :class="active==0?`active`:``" @click="getActive(0)">客户统计</li>
          <li :class="active==1?`active`:``" @click="getActive(1)">客户群统计</li>
          <div class="tips">
            日、周、月分别计算昨日数据相比1天、7天、30天前的变化情况，更多详细数据，请前往<span>数据中心</span></div>
        </ul>
        <!--        客户统计-->
        <customStatistics v-if="active==0"></customStatistics>
        <!--        客户群统计-->
        <groupStatistics v-if="active==1"></groupStatistics>
      </div>
      <div class="left-guide">
        <div class="com-title">功能指引<span @click="gotoInstruction">更多</span></div>
        <ul class="guide-list">
          <li v-for="(item,index) in guideList" :key="index">
            <img :src="item.icon"/>
            <div class="guide-info">
              <div class="title">{{ item.title }}</div>
              <div class="content">{{ item.content }}</div>
            </div>
            <div class="help">
              <div class="help-li" v-if="item.showVideo" @click="getVideo(item.videoUrl)">视频教程</div>
              <div class="help-li" v-if="item.isBook">操作手册</div>
            </div>

          </li>
        </ul>
      </div>
    </div>
    <div class="content-right">
      <!--      账号信息-->
      <div class="accountInfo">
        <div class="account-top">
          <img src="@/assets/images/profile.jpg"/>
          <div class="info">
            <div class="userName">你好，5424982</div>
            <div class="userType">主账号</div>
          </div>
        </div>
        <ul class="info-number">
          <li>
            <div class="item-li"><span></span>席位数</div>
            <div class="item-content">2</div>
          </li>
          <li>
            <div class="item-li"><span></span>席位数</div>
            <div class="item-content">2</div>
          </li>
        </ul>

      </div>
      <!--      今日任务-->
      <div class="task-list">
        <div class="com-title">今日任务<span @click="gotoTask">任务日历</span></div>
        <ul>
  <!--          浅紫色-lavende-高级群发，豆绿色--peaGreen--极速群发，紫色-purple--- 朋友圈， 粉红色-- pink---批量拉群-->
          <li class="lavende">
            <div class="li-content">高级群发</div>
            <span>13:56</span></li>
          <li class="peaGreen">
            <div class="li-content">极速群发</div>
            <span>13:56</span></li>
          <li class="purple">
            <div class="li-content">朋友圈</div>
            <span>13:56</span></li>
          <li class="pink">
            <div class="li-content">批量拉群</div>
            <span>13:56</span></li>
        </ul>
      </div>
      <!--       在线客服-->
      <div class="customerService"><img src="//s.yezgea02.com/1659318212859/%E7%BC%96%E7%BB%84%2023%402x.png">
        <div>您好，我是您的专属顾问</div>
        <div>工作日：9:00-18:00</div>
        <el-popover
          placement="bottom"
          width="200"
          trigger="click">
          <div class="kefu">
            <img src="../assets/images/kefu.png"/>
            微信扫码添加客服
          </div>
          <el-button slot="reference" plain style="width: 200px;" size="small"><span>立即咨询</span></el-button>
        </el-popover>
      </div>
      <div class="help-list">
        <div class="com-title">帮助文档<span>更多</span></div>
        <ul class="help-content">
          <li><span></span>操作指南</li>
          <li><span></span>操作指南</li>
          <li><span></span>操作指南</li>
          <li><span></span>操作指南</li>
          <li><span></span>操作指南</li>
        </ul>
      </div>
      <!--      立即反馈-->
      <div class="feedback1-big">
        <div class="feedback1">
          <div style="font-size: 12px;">产品使用有问题请反馈给我们</div>
          <div plain class="feedback1-btn"><span>立即反馈</span></div>
        </div>
      </div>
      <!--      更新日志-->
      <div class="updateLogs">
        <div class="com-title">更新日志<span>更多</span></div>
        <ul class="updateLogs-ul">
          <li>
            <div class="time-icon"></div>
            <div class="right-content">
              <svg-icon class="change-icon" icon-class="time"></svg-icon>
              <div class="logs-time">2024年4月11日</div>
              <div class="logs-content">
                ▫ 黑白名单：触发更新头像昵称;<br/>
                ▫ 员工账号：子账号支持修改密码；<br/>
                ▫ SOP：删除自动化任务支持删除任务；<br/>
                ▫ 客户群管理：新增已退群成员信息；<br/>
                ▫ ……等共20余项。<br/>
              </div>
            </div>
          </li>
          <li>
            <div class="time-icon"></div>
            <div class="right-content">
              <svg-icon class="change-icon" icon-class="time"></svg-icon>
              <div class="logs-time">2024年4月11日</div>
              <div class="logs-content">
                ▫ 黑白名单：触发更新头像昵称;<br/>
                ▫ 员工账号：子账号支持修改密码；<br/>
                ▫ SOP：删除自动化任务支持删除任务；<br/>
                ▫ 客户群管理：新增已退群成员信息；<br/>
                ▫ ……等共20余项。<br/>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <viewHelpVideo  v-if="showVideo" :visableIf.sync="showVideo"></viewHelpVideo>

  </div>
</template>

<script>
export default {
  name: "Index",
  components: {
    'customStatistics': () => import('./customStatistics.vue'),
    'groupStatistics': () => import('./groupStatistics.vue'),
    'viewHelpVideo': () => import('./viewHelpVideo.vue'),
  },
  data() {
    return {
      active: 0,
      showVideo:false,
      guideList: [
        {
          key: 'kfpyq',
          title: '客户朋友圈',
          content: '批量发送朋友圈，评论，可定时删除',
          icon: require('@/assets/images/guide/g-1.png'),
          showVideo: true,
          videoUrl: '',
          isBook: true,
          bookUrl: '',
        },
        {
          key: 'zxlt',
          title: '在线聊天',
          content: '聊天过程中可以添加群成员为好友',
          icon: require('@/assets/images/guide/g-2.png'),
          showVideo: false,
          isBook: true
        },
        {
          key: 'gjqf',
          title: '高级群发',
          content: '批量发送消息，不限次数',
          icon: require('@/assets/images/guide/g-3.png'),
          showVideo: false,
          isBook: true
        },
        {
          key: 'znyd',
          title: '智能应答',
          content: '通过关键词等识别自动触发回复标准问题',
          icon: require('@/assets/images/guide/g-4.png'),
          showVideo: false,
          isBook: true
        },
        {
          key: 'xkhyy',
          title: '新客户运营',
          content: '新客户添加成功后可自动邀请入群',
          icon: require('@/assets/images/guide/g-5.png'),
          showVideo: false,
          isBook: true
        },
        {
          key: 'zdtr',
          title: '自动踢人',
          content: '触发惩罚规则，自动踢出群',
          icon: require('@/assets/images/guide/g-6.png'),
          showVideo: false,
          isBook: true
        },
        {
          key: 'jsqf',
          title: '极速群发',
          content: '批量发送消息，速度更快，但次数受限',
          icon: require('@/assets/images/guide/g-7.png'),
          showVideo: false,
          isBook: true
        },
        {
          key: 'jsxkh',
          title: '接受新客户',
          content: '按条件自动通过好友添加申请',
          icon: require('@/assets/images/guide/g-8.png'),
          showVideo: false,
          isBook: true
        },
        {
          key: 'sop',
          title: 'SOP',
          content: '预设多天的话术, 按规则自动推送',
          icon: require('@/assets/images/guide/g-9.png'),
          showVideo: true,
          isBook: true
        },
        {
          key: 'rqhyy',
          title: '入群欢迎语',
          content: '客户进群后自动发送入群欢迎语',
          icon: require('@/assets/images/guide/g-10.png'),
          showVideo: false,
          isBook: true
        },
        {
          key: 'qjf',
          title: '群积分',
          content: '通过群行为获取积分，提高群活跃度',
          icon: require('@/assets/images/guide/g-11.png'),
          showVideo: false,
          isBook: true
        },
      ]
    };
  },
  methods: {
    getActive(index) {
      this.active = index;
    },
    getVideo(url) {
      this.showVideo = true;
    },
    gotoTask() {
      //任务日历
      const routeData = this.$router.resolve({
        name: 'taskCalendar',
      });
      window.open(routeData.href, '_blank');
    },
    gotoInstruction() {
      // 跳转到操作指南
      this.$router.push({
        name: 'instructionList',
      });

    },
  }
};
</script>

<style scoped lang="scss">
.home-big {
  padding: 16px;
  overflow-y: auto;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .content-left {
    flex: 1 0;
    margin-right: 16px;
    display: flex;
    flex-direction: column;

    .left-statistics {
      background-color: #fff;
      padding: 0 16px 16px;
      border-radius: 4px;
      margin-bottom: 16px;
    }

    .left-guide {
      background-color: #fff;
      padding: 0 16px 16px;
      border-radius: 4px;

    }
  }

  .content-right {
    width: 320px;
  }
}

.tablist {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  margin-top: 12px;
  position: relative;

  li {
    margin-right: 20px;
    list-style: none;
    color: rgba(0, 0, 0, .85);
    font-size: 16px;
    font-weight: 700;
    padding: 8px 0 !important;
    cursor: pointer;

    &.active {
      color: #2d8cf0;
    }
  }
}

.tips {
  position: absolute;
  right: 0px;
  font-size: 12px;
  height: 37px;
  display: flex;
  align-items: center;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);

  span {
    color: #2d8cf0;
  }
}

.guide-list {
  display: flex;
  flex-wrap: wrap;

  li {
    list-style: none;
    width: 25%;
    display: flex;
    width: 300px;
    height: 70px;
    background-color: #fff;
    align-items: center;
    margin-right: 16px;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;

    &:hover {
      background-color: #fafafa;

      .help {
        display: flex;
      }
    }

    .guide-info {
      display: flex;
      flex-direction: column;

      .title {
        margin-bottom: 5px;
      }

      .content {
        font-size: 12px;
        color: rgba(0, 0, 0, .45);
      }
    }

    .help {
      position: absolute;
      right: 10px;
      top: 10px;
      display: none;
      color: #2d8cf0;

      .help-li {
        margin-right: 10px;
      }
    }
  }

  img {
    width: 48px;
    height: 48px;
    margin-right: 10px;
  }
}

.com-title {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 0, 0, .85);
  padding: 10px 0;
  padding-top: 20px;

  span {
    padding: 0px 10px;
    height: 25px;
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
  }
}

.accountInfo {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 4px;

  .account-top {
    display: flex;
    margin-bottom: 16px;

    img {
      width: 60px;
      height: 60px;
    }

    .info {
      flex: 1 0;
      padding-left: 12px;

      .userName {
        color: rgba(0, 0, 0, .85);
        font-weight: 600;
        font-size: 16px;
      }

      .userType {
        display: inline-block;
        background: #ffede3;
        border-radius: 2px;
        padding: 2px 6px;
        color: #f90;
        margin-top: 5px;

      }
    }
  }

  .info-number {
    display: flex;
    width: 100%;
    padding: 8px;

    li {
      list-style: none;
      flex: 1;

      .item-li {
        color: rgba(0, 0, 0, .45);
        font-size: 12px;
        margin-bottom: 5px;

        span {
          width: 3px;
          height: 10px;
          background: #2d8cf0;
          display: inline-block;
          margin-right: 10px;
        }
      }

      .item-content {
        font-weight: 600;
        color: #000;
        font-size: 18px;
        font-family: DINAlternate-Bold, DINAlternate;
      }
    }
  }
}

.task-list {
  padding: 0 16px 12px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 16px;

  ul {
    li {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px;
      border-radius: 4px;
      margin-top: 4px;
      background: rgb(255, 230, 229);
      &.lavende {
        background: rgb(235, 242, 255);
      }
      &.peaGreen {
        background: rgb(217, 246, 234);
      }
      &.purple {
        background: rgb(242, 229, 255);
      }
      &.pink {
        background: rgb(255, 230, 229);
      }

    }
  }
}

.customerService {
  padding: 16px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  margin-bottom: 16px;
}

.customerService > img {
  width: 48px;
  margin-bottom: 12px;
}

.customerService > div:first-of-type {
  color: rgba(0, 0, 0, .85);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

.customerService > div:nth-of-type(2) {
  color: rgba(0, 0, 0, .45);
  font-size: 12px;
  margin-bottom: 12px;
}

.kefu {
  width: 170px;
  height: 170px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

  img {
    width: 150px;
    height: 150px;
    margin: auto;
  }
}

.help-list {
  padding: 0 16px 12px;
  background-color: #fff;
  border-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.help-content {
  margin-top: 10px;

  li {
    display: flex;
    height: 32px;
    align-items: center;
    cursor: pointer;
    color: rgba(0, 0, 0, .85);
    margin-bottom: 4px;
    list-style: none;

    span {
      display: inline-block;
      width: 4px;
      height: 4px;
      border: 1px solid rgba(0, 0, 0, .25);
      vertical-align: 3px;
      margin-right: 8px;
    }
  }
}

.feedback1 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80px;
  cursor: pointer;
  background-image: url(https://s.yezgea02.com/1646629747903/dsdsds.png);
  background-size: cover;
  border-radius: 4px;
  overflow: hidden;
  margin: 0px;

  .feedback1-btn {
    color: #fff;
    border-color: #3070ff;
    background: #3070ff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
    width: 80px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 10px;
  }
}

.feedback1-big {
  padding: 0 16px;
  background-color: #fff;
}

.updateLogs {
  padding: 0 16px 16px;
  background-color: #fff;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;

  .updateLogs-ul {
    margin-top: 15px;

    li {
      list-style: none;
      position: relative;
      padding-left: 25px;
      margin-bottom: 10px;

      .change-icon {
        position: absolute;
        top: 0px;
        left: -4px;
      }

      &:last-child {
        &:after {
          display: none;
        }
      }

      &:after {
        position: absolute;
        top: 20px;
        left: 4px;
        height: calc(100% - 10px);
        border-left: 1px solid #e9e9e9;
        content: '';
      }

      .logs-content {
        font-size: 13px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 24px;

      }
    }
  }
}
</style>

